<div  style="width: 250px;height: 650px;float: left;padding: 6px;">
    <div style="height: 80%;padding: 5px;background-color: white;margin-bottom: 5%;border-top-color: red;border-top-style: solid;border-top-width: 3px">
        <div style="height: 8%">
            <div style="float: left;padding: 5px;"><strong>房友分看板</strong></div>
            <div style="float: right">
                <button type="button" class="btn btn-danger">今天</button>
                <button type="button" class="btn btn-info">本月初</button>
            </div>
        </div>
        <div class="thumbnail" style="margin: 20px 10px;background-color: peachpuff;height: 15%">
            <div style="float: left;width: 48%;text-align: center">
                <h5>中原分</h5>
                <h4 style="color:red;"><strong>565.2</strong></h4>
                <br/>
            </div>
            <span style="border: 1px;background-color: white;width: 1px;display: inline-block;height: 60px;border-style: solid;color: white"></span>
            <div style="float: right;width: 48%;text-align: center">
                <h5>等级</h5>
                <p style="color: red"><i class="glyphicon glyphicon-queen"></i>
                    <span><strong>王者</strong></span>
                </p>
            </div>
        </div>
        <div style="height: 45% ;padding: 20px 10px;">
            <table class="table table-striped">
                <tr>
                    <td>业绩表现</td>
                    <td>15.67万</td>
                    <td></td>
                </tr>
                <tr>
                    <td>房源积分</td>
                    <td>288分</td>
                    <td></td>
                </tr>
                <tr>
                    <td>客源积分</td>
                    <td>490分</td>
                    <td></td>
                </tr>
                <tr>
                    <td>品质积分</td>
                    <td>180分</td>
                    <td></td>
                </tr>
                <tr>
                    <td>素质积分</td>
                    <td>100分</td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div style="margin: 20px 10px ;">
            <p>本月初房友原分等级达到<font color="red">钻石及以上，</font>其他各维度表现达到<font color="red">3星以上</font>即可获得<font color="red">精选房源申请资格，享专属获客特权</font></p>
        </div>
    </div>
    <div style="height: 20%;padding: 5px ;background-color: white;border-left-color: red;border-left-style: solid;border-left-width: 5px">
        <h4>&nbsp&nbsp直放盘数据</h4>
        <h5>直通后，房友网你的黄金展位房源数量为70套</h5><br/>
    </div>
</div>
<div  style="width: 520px;height: 650px;float: left;padding: 6px;background-color: white;margin-top: 5px;border-top-color: red;border-top-style: solid;border-top-width: 3px">
    <div style="height: 50px ;">
        <div style="float: left;height: 100%">
            <div class="glyphicon glyphicon-signal" aria-hidden="true" style="padding: 10px 10px"></div>
            工作量统计
        </div>
        <div style="float: right;height: 100% ;padding: 10px 10px">
            <button type="button" class="btn btn-info" onclick="dofindWorkCount('today',25)">&nbsp;&nbsp;今天&nbsp;&nbsp;</button>
            <button type="button" class="btn btn-warning" onclick="dofindWorkCount('week',25)">&nbsp;&nbsp;本周&nbsp;&nbsp;</button>
            <button type="button" class="btn btn-info" onclick="dofindWorkCount('month',25)">&nbsp;&nbsp;本月&nbsp;&nbsp;</button>
        </div>
    </div>
    <div style="padding: 40px 5px">
        <table>
            <tr>
                <td>
                    <div style="width: 120px;height: 140px;background-image: url('/dist/img/table-greed.jpg');background-repeat: no-repeat">
                        <div style="padding: 50px 50px" id="source">0/0</div>
                        <div style="text-align: center" >新登房源</div>
                    </div>
                </td>
                <td>
                    <div style="width: 120px;height: 140px;background-image: url('/dist/img/table-greed.jpg');background-repeat: no-repeat">
                        <div style="padding: 50px 50px" >0/0</div>
                        <div style="text-align: center">潜转有效客户</div>
                    </div>
                </td>
                <td>
                    <div style="width: 120px;height: 140px;background-image: url('/dist/img/table-greed.jpg');background-repeat: no-repeat">
                        <div style="padding: 50px 50px" id="doorkey">0/0</div>
                        <div style="text-align: center">新增钥匙</div>
                    </div>
                </td>
                <td>
                    <div style="width: 120px;height: 140px;background-image: url('/dist/img/table-greed.jpg');background-repeat: no-repeat">
                        <div style="padding: 50px 50px"id="photoStaff">0/0</div>
                        <div style="text-align: center">新增实勘</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div style="width: 120px;height: 140px;background-image: url('/dist/img/table-greed.jpg');background-repeat: no-repeat">
                        <div style="padding: 50px 50px"id="clientSource">0/0</div>
                        <div style="text-align: center">新增客源</div>
                    </div>
                </td>
                <td>
                    <div style="width: 120px;height: 140px;background-image: url('/dist/img/table-greed.jpg');background-repeat: no-repeat">
                        <div style="padding: 50px 50px"id="secondClient">0/0</div>
                        <div style="text-align: center">二手带看客户数</div>
                    </div>
                </td>
                <td>
                    <div style="width: 120px;height: 140px;background-image: url('/dist/img/table-greed.jpg');background-repeat: no-repeat">
                        <div style="padding: 50px 50px">0/0</div>
                        <div style="text-align: center">一手带看客户数</div>
                    </div>
                </td>
                <td>
                    <div style="width: 120px;height: 140px;background-image: url('/dist/img/table-greed.jpg');background-repeat: no-repeat">
                        <div style="padding: 50px 50px"id="followNum">0/0</div>
                        <div style="text-align: center">客户跟进</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div style="width: 120px;height: 140px;background-image: url('/dist/img/table-greed.jpg');background-repeat: no-repeat">
                        <div style="padding: 50px 50px"id="sourceNum">0/0</div>
                        <div style="text-align: center">房源跟进</div>
                    </div>
                </td>
                <td>
                    <div style="width: 120px;height: 140px;background-image: url('/dist/img/table-greed.jpg');background-repeat: no-repeat">
                        <div style="padding: 50px 50px"id="followTime">0/0</div>
                        <div style="text-align: center">客源有效电话</div>
                    </div>
                </td>
                <td>
                    <div style="width: 120px;height: 140px;background-image: url('/dist/img/table-greed.jpg');background-repeat: no-repeat">
                        <div style="padding: 50px 50px"id="sourceTime">0/0</div>
                        <div style="text-align: center">房源电话总时段</div>
                    </div>
                </td>
                <td>

                </td>
            </tr>

        </table>
    </div>
</div>
<div  style="width: 240px;margin-left: 6px;height: 650px;float: left;padding: 6px;background-color: white;margin-top: 5px;background-color: white;margin-bottom: 5%;border-top-color: red;border-top-style: solid;border-top-width: 3px">
    <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a href="#">房源消息</a></li>
        <li role="presentation"><a href="#">客源消息</a></li>
    </ul>
</div>

<script>
    $(function () {
        var id =25;
        var time ="today";
        dofindWorkCount(time,id);

    })

    function dofindWorkCount(time,id) {
        $.getJSON("/emp/countWork/"+time+"/"+id,function (_data) {
            if(_data.state==200){
                doInitData(_data.data);
            }else {
                console.log(_data.msg);
            }
        })
    }

    function doInitData(data) {
        $.each(data, function (i,val) {
            dochange(i,val)
        })

    }

    function dochange(id,data) {
        $("#"+id).html(data+"/0");
        if(data){
            $("#"+id).parent().css("background-image","url(/dist/img/table-green.jpg)");
        }else {
            $("#"+id).parent().css("background-image","url(/dist/img/table-greed.jpg)");
        }
    }
</script>